<template>
  <div>
    <m-loading v-if="!show"></m-loading>
    <div class="page-content container" v-if="show">
      <div class="content-box">
        <div class="content-box-title">
          <i class="glyphicon glyphicon-play-circle"></i> 每日一歌
        </div>
        <div class="content-box-data row">
          <div class="col-sm-12">
            <div class="recommend-card">
              每日一歌
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="content-box-title">
          <i class="glyphicon glyphicon-play-circle"></i> 推荐歌单
        </div>
        <div class="content-box-data row">

          <div class="col-sm-3 data-item" v-if="list" v-for="item in list">
            <div class="card">
              <a href="#" class="img-box">
                <img :src="item.cover" />
                <div class="play-num"><i class="glyphicon glyphicon-headphones"></i> {{item.playNum}} </div>
                <div class="play-btn"><i class="glyphicon glyphicon-play"></i></div>
              </a>
              <router-link :to="{name:'PlaylistDetail',params: {id:item.id}}" :title="item.title" :class="'font-box'">
                {{item.title}}
              </router-link>
              <div class="head-box">
                <a href="#" class="pull-left head-img">
                  <img :src="item.user.data.avatar" width="40" height="40" class="img-circle" />
                </a>
                <div class="pull-left info">
                  <div class="nickname">
                    <a href="#">{{item.user.data.name}}</a>
                    <i class="glyphicon glyphicon-fire" style="color: red;"></i>
                  </div>
                  <span class="time">创建于 {{item.created_at}}</span>
                </div>
                
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="content-box">
        <div class="content-box-title">
          <i class="glyphicon glyphicon-play-circle"></i> 推荐新歌
        </div>
        <div class="content-box-data row">

          <div class="col-sm-3 data-item" v-for="item in list">
            <div class="card">
              <a href="#" class="img-box">
                <img :src="item.cover"/>
                <div class="play-num"><i class="glyphicon glyphicon-headphones"></i> {{item.playNum}} </div>
                <div class="play-btn"><i class="glyphicon glyphicon-play"></i></div>
              </a>
              <a href="#" :title="item.title" class="font-box">
                {{item.title}}
              </a>
              <div class="head-box">
                <a href="#" class="pull-left head-img">
                  <img :src="item.user.data.avatar" width="40" height="40" class="img-circle" />
                </a>
                <div class="pull-left info">
                  <div class="nickname">
                    <a href="#">{{item.user.data.name}}</a>
                    <i class="glyphicon glyphicon-fire" style="color: red;"></i>
                  </div>
                  <span class="time">创建于 {{item.created_at}}</span>
                </div>
                
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>
<script>
// import { fetchIndexList } from '../vuex/actions'
// import { getList } from '../vuex/getters'
import {fetchIndexList} from '../service'
import mLoading from './common/Loading'
export default {
  components: {
    mLoading
  },
  data () {
    return {
      list: [],
      show: false
    }
  },
  // vuex: {
  //   actions: {
  //     fetchIndexList
  //   },
  //   getters: {
  //     list: getList
  //   }
  // },
  // route: {
  //   data () {
  //     alert(122)
  //   }
  // },
  mounted () {
  },
  created () {
    fetchIndexList().then((data) => {
      console.log(data)
      this.list = data
      this.show = true
    })
  }
}
</script>
<style scoped>
.recommend-card{
  width: 100%;
  height: 250px;
  background: #9daa90;
}
</style>
